Fix pricing modal being cut off and unscrollabel on low resolution screens or when zoomed in #8848
Conversation
…licts with overflow-y: auto
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR fixes a scrolling issue in the pricing modal by adjusting how content centering is handled, ensuring proper scrollability on low-resolution screens.
- Moved
justify-content: centerfromStyledContentto Modal component in/packages/twenty-front/src/modules/auth/components/AuthModal.tsx - Added
.justify-centerclass toStyledMainContainerin/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsxfor consistent centering - Resolved conflict between
justify-content: centerandoverflow-y: autothat was causing content to be cut off - Fixed modal scrolling behavior while preserving centered alignment for non-overflowing content
2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| flex: 0 1 100%; | ||
| overflow: hidden; |
There was a problem hiding this comment.
style: flex: 0 1 100% with overflow: hidden might still cause content clipping in some edge cases. Consider using flex: 1 1 auto instead
|
Pushed a change. What do you think of this solution @khuddite? Do you see any bug/downside with it? |
| @@ -29,7 +29,8 @@ const StyledModalDiv = styled(motion.div)<{ | |||
| if (isMobile) return `0`; | |||
| return theme.border.radius.md; | |||
| }}; | |||
| overflow: hidden; | |||
| overflow-x: hidden; | |||
| overflow-y: auto; | |||
There was a problem hiding this comment.
I am not sure if there is a use case for this right now in the app, but here is what I am thinking.
When the modal has header, content, and footer, previously only content was scrollable meaning the header and footer will be sticky above/below the content. But now, the entire modal is scrollable, meaning the header or footer will be invisible at some point.
I am not sure if we are okay with following that path here. @FelixMalfait
There was a problem hiding this comment.
Maybe that diminishes the purpose of the header/footer? IDK
FelixMalfait
force-pushed
the
pricing-modal-padding
branch
from
ee555f2 to
7df2ef5
Compare
|
Thanks @khuddite for your contribution! |
Fixes: #7999
Summary
I am not 100% sure why it's happening, but it seems
justify-content: centerconflicts withoverflow-y: autoand that's why the modal content becomes unscrollable and cut off.Solution
To preserve the styling that centers the content inside the modal even when the content height is less than the modal, I moved
justify-content: centerfrom the content to the modal container. When the content overflows the modal, it seemsjustify-content: centerdoes nothing, though.Screen Recording
CleanShot.2024-12-03.at.09.41.00.mp4